<template>
  <div>
    <el-form label-width="120px">
      <el-form-item label="时间转化:">
        myval.date[0].format("{y}-{m}-{d} {h}:{i}") :<br />
        ===>>{{ myval.date[0].format("{y}-{m}-{d} {h}:{i}") }}
      </el-form-item>
      <el-form-item label="克隆:">
        myval.date[0].clone() :<br />
        ===>>{{ myval.date[0].clone() }}
      </el-form-item>
      <el-form-item label="设置为27日:">
        myval.date[0].set('d',27).format() :<br />
        ===>>{{ myval.date[0].set('d',27).format() }}
      </el-form-item>
      <el-form-item label="获取年:">
        myval.date[0].get('y') :<br />
        ===>>{{ myval.date[0].get('y') }}
      </el-form-item>
      <el-form-item label="获取增加后时间:">
        myval.date[0].add(7, 'm').format() :<br />
        ===>>{{ myval.date[0].add(7, 'm').format() }}
      </el-form-item>
      <el-form-item label="获取减少后时间:">
        myval.date[0].subtract(7, 'm').format() :<br />
        ===>>{{ myval.date[0].subtract(7, 'm').format() }}
      </el-form-item>
      <el-form-item label="获取时间差:">
        myval.date[0].diff( myval.date[1], 'd',true) :<br />
        ===>>{{ myval.date[0].diff( myval.date[1], 'd',true) }}
      </el-form-item>
      <el-form-item label="是否在指定时间之前:">
        myval.date[0].isBefore( myval.date[1], 'd') :<br />
        ===>>{{ myval.date[0].isBefore( myval.date[1], 'd') }}
      </el-form-item>
      <el-form-item label="是否在指定时间之后:">
        myval.date[0].isAfter( myval.date[1]) :<br />
        ===>>{{ myval.date[0].isAfter( myval.date[1]) }}
      </el-form-item>
      <el-form-item label="是否在指定时间之间:">
        (new Date).IsBetween( myval.date[0], myval.date[1]) :<br />
        ===>>{{ (new Date).IsBetween( myval.date[0], myval.date[1]) }}
      </el-form-item>
      <el-form-item label="是否和指定时间相同:">
        myval.date[0].isSame( myval.date[1]) :<br />
        ===>>{{ myval.date[0].isSame( myval.date[1]) }}
      </el-form-item>
      <el-form-item label="获取当前月天数:">
        myval.date[0].daysInMonth( ) :<br />
        ===>>{{ myval.date[0].daysInMonth( ) }}
      </el-form-item>
     



      <el-form-item>
        <el-date-picker
          v-model="myval.date"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import {reactive, watch} from 'vue'
export default {
    data() {
        const d: Date[] = []
        const myval = reactive({
          date:d
        });
        const reset = ()=>{
            const date = new Date()
            const date1 = date.subtract(7,"d");
            const date2 = date.add(7,"d");
            console.log(`date2.ToObject()====>>>>`,date2.ToObject())
            myval.date = [date1,date2];
        }
        // watch(myval,(newn,oldv)=>{
        //   console.log(newn,oldv,38)
        // })
        reset();
        return {
            myval,
            reset
        }
    }
}
</script>
